<template>
  <canvas ref="stars" class="stars" id="canvas" ></canvas>
</template>

<script>
  let animationFunction = require( '../../../utils/geralt_common/animation_function');

  let Dust = (x, y, size) => {
    var d = {};
    d.x = x;
    d.y = y;
    d.size = size;
    d.texture = createDustParticle();
    d.speed = Math.random();
    return d;
  }

  export default {
    mounted(){
      let starCanvas = this.$refs.stars;
      let starCtx = starCanvas.getContext('2d');
      this.$refs['stars'].height = window.innerHeight;
      this.$refs['stars'].width = window.innerWidth;
      starCtx.globalCompositeOperation = 'lighter';

      let currentGalaxy = animationFunction.Galaxy(window.innerHeight/2,window.innerWidth/2);
      for(let i=0;i<1000;i++){
        let star = currentGalaxy.getRandomStar();
        currentGalaxy.calStarParams(star);
        currentGalaxy.stars.push(star);
      }
      currentGalaxy.calculateCenter();
      this.currentGalaxy = currentGalaxy;
      this.starCtx = starCtx;
      this.loop();
    },

    methods: {
      render() {
        this.starCtx.clearRect(0, 0, window.innerWidth, window.innerHeight);
        this.starCtx.fillStyle = '#ffffff';
        this.starCtx.strokeStyle = 'rgba(255,255,255,.5)';
        this.starCtx.beginPath();


        this.currentGalaxy.stars.forEach((s) => {
          this.starCtx.moveTo(s.x, s.y);
          this.starCtx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI);
        });

        this.starCtx.fill();
      },
      updateStarDust(s, g) {
        // if (g == this.currentGalaxy) return;
        s.angle += (0.5 + s.speed * 0.5) / s.distance;
        s.x = g.x + Math.cos(s.angle + g.realAngleOffsetX) * s.distance;
        s.y = g.y + Math.sin(s.angle + g.realAngleOffsetY) * s.distance;
      },
      loop(){
        this.currentGalaxy.stars.forEach((s) => {
          this.updateStarDust(s, this.currentGalaxy);
        });
        this.render();
        window.requestAnimationFrame(this.loop);
      }
    }
  }
</script>
